<template>
  <navibar></navibar>

  <view v-if="isin == 2">
    <scroll-view class="viewpoint" scroll-y>
      <view>
        <!-- 标题 -->
        <view class="title">
          {{ newsDetail?.title }}
        </view>
        <!--作者信息 -->
        <view class="authorinfo" @tap="toaucenter">
          <!-- 头像 -->
          <view class="avatar">
            <image :src="newsDetail?.avatar" mode="scaleToFill" />
          </view>
          <!-- 用户信息 -->
          <view class="userInfo">
            <view class="username">
              <text>{{ newsDetail?.username }}</text>
            </view>
            <view class="audiTime">
              <text>{{ formatTime(newsDetail?.auditTime) }}</text>
            </view>
          </view>
        </view>
        <!-- 新闻内容 -->
        <view class="newscontent">
          <view v-html="newsDetail?.content"></view>
        </view>
      </view>
    </scroll-view>
    <!-- 底部 -->
    <view class="buttom">
      <view class="acesse" @tap="comman">
        <text class="iconfont icon-pinglun"></text>
      </view>
      <view :class="newsDetail?.clickLike ? 'like active' : 'like'" @tap="like">
        <text class="iconfont icon-xihuan"></text>
      </view>
      <view :class="newsDetail?.clickFavorite ? 'favorite active' : 'favorite'" @tap="favorite">
        <text class="iconfont icon-shoucang1"></text>
      </view>
    </view>
    <view>
      <!-- 提示信息弹窗 -->
      <uni-popup ref="popup" background-color="#fff">
        <evaluate ref="Evaluate" :newsId="query.newsId"></evaluate>
      </uni-popup>
    </view>
  </view>
  <view v-else-if="isin != 2" style="text-align: center; color: #8e8a8a"> ~该新闻不存在~ </view>
</template>

<script setup lang="ts">
import { ref, defineProps } from 'vue'
import navibar from './component/navibar.vue'
import evaluate from './component/evaluate.vue'
import { getNewsDetaiAPI, getCommentAPI } from '@/services/detail'
import { ClickFavorite, ClickLike } from '@/services/news'
import { onLoad } from '@dcloudio/uni-app'
import type { newsDetail } from '@/types/editor'
import { useMemberStore } from '@/stores/modules/member'
import { formatTime } from '@/utils/time'
const query = defineProps<{ newsId: number }>()
const newsDetail = ref<newsDetail>()
const memberStore = useMemberStore()
const isin = ref(0)
const getNewsDetail = async () => {
  const res = await getNewsDetaiAPI(query.newsId)
  console.log(res)

  newsDetail.value = res.data
  isin.value = 2
}
const popup = ref<UniHelper.UniPopup>()
const Evaluate = ref()
const comman = () => {
  popup.value!.open('bottom')

  Evaluate.value.getCommentList()
}
const like = async () => {
  memberStore.click_like(query.newsId)
  await ClickLike({ newsId: query.newsId, account: memberStore.profile?.user.account })
  const res = await getNewsDetaiAPI(query.newsId)
  newsDetail.value = res.data
}
const favorite = async () => {
  memberStore.click_favourte(query.newsId)
  await ClickFavorite({ newsId: query.newsId, account: memberStore.profile?.user.account })
  const res = await getNewsDetaiAPI(query.newsId)
  newsDetail.value = res.data
}
const toaucenter = () => {
  uni.navigateTo({ url: `/pages/auditorcenter/auditorcenter?account=${newsDetail.value?.author}` })
}
onLoad(() => {
  getNewsDetail()
})
</script>

<style lang="scss">
page {
  height: 100%;
  background-color: #fff;
  position: relative;
  display: flex;
  flex-direction: column;
}
.viewpoint {
  padding: 0 20rpx;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 220rpx);
  .title {
    margin: 20rpx 0;
    color: #000;
    font-size: 40rpx;
    font-weight: bold;
  }
  .authorinfo {
    width: 100%;
    height: 120rpx;
    display: flex;
    .avatar {
      height: 100%;
      width: 120rpx;
      border-radius: 120rpx;
      overflow: hidden;
    }
    .userInfo {
      height: 100%;
      flex: 1;
      margin: 20rpx;
      .username {
        font-weight: bold;
        color: #000;
        font-size: 32rpx;
      }
      .audiTime {
        margin-top: 10rpx;
        color: #575353;
        font-size: 24rpx;
      }
    }
  }
  .newscontent {
    margin-top: 20rpx;
    padding-bottom: 100rpx;
    width: 100%;
    font-size: 32rpx;
    color: #000;
  }
}
.buttom {
  display: flex;
  justify-content: space-around;
  height: 100rpx;
  width: 100%;
  position: absolute;
  bottom: 0rpx;
  border-top: 1rpx solid #ccc;
  background-color: #fff;
  .acesse,
  .like,
  .favorite {
    line-height: 100rpx;
    text-align: center;
    height: 100%;
    width: 100rpx;
  }
  .iconfont {
    font-size: 40rpx;
  }
}
.evaluate {
  height: calc(100vh - 200rpx);
  width: 100%;
}
.active {
  color: #f04142;
}
</style>